<template>
  <base-modal
    :title="$t('task.list.components.taskTransferHandle')"
    :show.sync="sendMessageDialog"
    width="600px"
    class="send-message-to-customer-dialog"
  >
    <div class="dialog-body">
      <div class="dialog-body-content">
        {{$t('task.tip.taskTransferTip1')}}
        <el-tooltip
          :content="$t('task.tip.taskTransferTip2')"
          placement="top"
        >
          <i class="iconfont icon-question task-icon"></i> 
        </el-tooltip>
        <br />
        {{$t('task.tip.taskTransferTip3')}}
        <p @click="checkDept(0)">
          <template v-if="isOpenData && staffId">
            <open-data type="userName" :openid="staffId"></open-data>
          </template>
          <template v-else>
            {{ displayName || $t('task.tip.taskTransferTip4') }}
          </template>
        </p>
        <p @click="checkDept(1)">
          <template v-if="isOpenData && synergies && synergies.length">
            <open-data v-for="item in synergies" :key="item.staffId" type="userName" :openid="item.staffId"></open-data>
          </template>
          <template v-else>
            {{ displayNames || $t('task.tip.taskTransferTip5') }}
          </template>
        </p>
      </div>
    </div>
    <div class="dialog-footer" slot="footer">
      <el-button @click="sendMessageDialog = false">{{$t('common.base.cancel')}}</el-button>
      <el-button :disabled="loading" type="primary" @click="onSubmit">{{$t('common.base.makeSure')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import { isOpenData } from '@src/util/platform'
/* Api */
import * as TaskApi from "@src/api/TaskApi.ts";
import { BaseSelectUserModeEnum } from '@src/component/common/BaseSelectUser/model/enum'
export default {
  name: "task-transfer",
  inject: ["initData"],
  props: {
    taskIdList: {
      type: Array, //ids
      default: [],
    },
  },
  data: () => {
    return {
      isOpenData,
      sendMessageDialog: false,
      synergies: [],
      executorId: "",
      displayNames: "", // 协同人
      displayName: "", // 负责人
      staffId: '', // 负责人
      loading: false,
    };
  },
  methods: {
    /**
     * @description 工单转派提交
     */
    async onSubmit() {
      
      this.loading = true;
      
      const { taskIdList, synergies, executorId, $platform } = this;
      const fromId = window.frameElement.getAttribute("id");
      const params = {
        taskIdList,
        synergies,
        executorId,
      };
      if (!executorId) {
        $platform.alert(this.$t('task.tip.taskTransferTip4'));
        this.loading = false;
        return;
      }
      const { status, message, data, succ } = await TaskApi.redeployBatch(
        params
      );
      let msg = message;
      if (status === 0) {
        msg = this.$t('task.tip.taskTransferTip6');
      } else if (status === 1) {
        if (data) {
          msg += "： ";
          data.fail.forEach((item, index) => {
            msg += item.taskNo;
            if (index !== data.fail.length - 1) {
              msg += ",";
            }
          });
          msg += this.$t('task.tip.taskTransferTip7', {num: data.succ?.length || 0});
        }
      }
      this.loading = false;
      this.sendMessageDialog = false;
      const confirm = await this.$platform.confirm(msg,{customClass: 'task-redeploy-batch-confirm'});
      if(!confirm) return;
      this.refreshTab(fromId)
    },
    // 刷新Tab
    refreshTab(fromId){
      window.__exports__refresh = '';
      this.$platform.refreshTab(fromId);
    },
    /**
     * @description 选择负责人和协同人
     */
    checkDept(type = 0) {
      // 判断是否是团队
      const { allotByTag } = this.initData.taskConfig;
      // type 1协同人 0 负责人
      const name = allotByTag && !type ? "team" : "dept";
      let option = {
        ...(type ? {} : { max: 1 }),
        mode: BaseSelectUserModeEnum.Filter
      };
      
      this.$fast.select.multi.user(option).then(({ data, status }) => {
        if (!status) {
          const { userId, displayName, staffId } = data.users[0];
          if (type) {
            this.synergies = data.users;
            this.displayNames = data.users
              .map((item) => {
                return item.displayName;
              })
              .join(",");
          } else {
            this.executorId = userId;
            this.displayName = displayName;
            this.staffId = staffId;
          }
        }
      });
    },
    openSendMessageDialog() {
      this.sendMessageDialog = true;
    },
  },
};
</script>

<style lang="scss">
.task-redeploy-batch-confirm {
  .el-message-box__content {
    word-break: break-all;
  }
}
</style>
<style lang="scss" scoped>
.send-message-to-customer-dialog {
  padding: 0 10px;
  .dialog-body {
    padding: 15px;
    padding-bottom: 30px;
    margin: 10px auto;
    width: 96%;
    &-content {
      font-size: 12px;
      background-color: #d9edf7;
      padding: 10px 25px;
      > p {
        min-height: 30px;
        color: #999;
        line-height: 30px;
        border: 1px solid #e0e1e2;
        background-color: #fff;
        padding-left: 10px;
        margin-top: 10px;
        margin-bottom: 0;
      }
    }
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
